<template>
  <view class="home-container">
    <view class="clazz-list">
      <view class="item" @click="onClickAI"
        ><text>智趣</text><text>问答</text></view
      >
      <view class="item" @click="onClickN10">
        <text>10以内</text><text>加减法</text></view
      >
      <view class="item" @click="onClickN20"
        ><text>20以内</text><tex>加减法</tex></view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  methods: {
    onClickAI() {
      uni.navigateTo({
        url: "/pages/index/ai",
      });
    },
    onClickN10() {
      uni.navigateTo({
        url: "/pages/index/n10",
      });
    },
    onClickN20() {
      uni.navigateTo({
        url: "/pages/index/n20",
      });
    },
  },
};
</script>

<style lang="scss">
.home-container {
  width: 100vw;
  min-height: 100vh;
  .clazz-list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 40rpx 0;
    box-sizing: border-box;
    .item {
      width: 120rpx;
      height: 120rpx;
      padding: 20rpx;
      border-radius: 16rpx;
      margin: 20rpx;
      color: darkgreen;
      border: 1rpx solid darkgreen;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
